<template>
  <div class="dataVisualize-box">
    <div class="card top-box">
      <div class="top-title">数据可视化</div>
      <el-tabs v-model="initVar.tabActive" class="demo-tabs" @tab-click="initDataRange">
        <el-tab-pane v-for="item in tab" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
      </el-tabs>
      <div class="top-content">
        <el-row :gutter="40">
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <div class="item-left sle">
              <span class="left-title">项目总数</span>
              <div class="img-box">
                <img src="./images/book-sum.png" alt="" />
              </div>
              <span class="left-number">{{ initVar.total }}</span>
            </div>
          </el-col>
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <div class="item-center">
              <div class="gitee-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/add_person.png" alt="" />
                </div>
                <span class="item-value">{{ initVar.newCont }}</span>
                <span class="traffic-name sle">新建项目</span>
              </div>
              <div class="gitHub-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/add_team.png" alt="" />
                </div>
                <span class="item-value">{{ initVar.dev }}</span>
                <span class="traffic-name sle">进行中项目</span>
              </div>
              <div class="today-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/today.png" alt="" />
                </div>
                <span class="item-value">{{ initVar.done }}</span>
                <span class="traffic-name sle">已完成项目</span>
              </div>
              <div class="yesterday-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/book_sum.png" alt="" />
                </div>
                <span class="item-value">{{ initVar.important }}</span>
                <span class="traffic-name sle">重要项目</span>
              </div>
            </div>
          </el-col>
          <el-col class="mb40" :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
            <div class="item-right">
              <div class="echarts-title">项目情况</div>
              <div class="book-echarts">
                <Pie ref="pieRef" :pie-data="pieData" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="card bottom-box">
      <div class="bottom-title">数据来源</div>
      <div class="bottom-tabs">
        <el-tabs v-model="initVar.tabActive" class="demo-tabs">
          <el-tab-pane v-for="item in tab" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="curve-echarts">
        <Curve ref="curveRef" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="dataVisualize">
import { onMounted, reactive, ref } from "vue";
import Pie from "./components/pie.vue";
import Curve from "./components/curve.vue";
import apiService from "@/api/services/apiService";
import { ItemLevel, ItemState } from "@/enums/businessEnum";

const pieData = ref<PieDataItem[]>();
const pieRef = ref<InstanceType<typeof Pie> | null>(null);

const initVar = reactive({
  tbName: "item",
  tabActive: 1,
  total: 0,
  newCont: 0,
  dev: 0,
  done: 0,
  important: 0
});

let dataRange: Date[] = [];

interface PieDataItem {
  name: string;
  value: number;
}

const tab = [
  { label: "近一月", name: 1 },
  { label: "近三月", name: 2 },
  { label: "近一年", name: 3 }
];

onMounted(() => {
  initDataRange({ paneName: 1 });
});

const initDataRange = (tab: any) => {
  console.log(tab.paneName);
  let curDate = new Date();
  let [year, month, day] = [curDate.getFullYear(), curDate.getMonth(), curDate.getDate()];
  if (tab.paneName == 1) {
    dataRange = [new Date(year, month - 1, day), curDate];
  } else if (tab.paneName == 2) {
    dataRange = [new Date(year, month - 3, day), curDate];
  } else if (tab.paneName == 3) {
    dataRange = [new Date(year - 1, month, day), curDate];
  }
  initData();
};

const initData = () => {
  initVar.total = 0;
  initVar.newCont = 0;
  initVar.dev = 0;
  initVar.done = 0;
  initVar.important = 0;
  let groupCondition = [
    { $project: { state: 1, level: 1, orgId: 1, start_date: 1 } },
    { $match: { start_date: { $gte: dataRange[0], $lte: dataRange[1] } } },
    { $group: { _id: { state: "$state", level: "$level" }, value: { $sum: 1 } } }
  ];
  return new Promise(() => {
    apiService.group<any>(initVar.tbName, groupCondition).then(({ data }) => {
      data.forEach(item => {
        if (item._id.state === ItemState.NEW) {
          initVar.newCont += item.value;
        } else if (item._id.state === ItemState.RUNNING) {
          initVar.dev += item.value;
        } else if (item._id.state === ItemState.DONE) {
          initVar.done += item.value;
        }
        if (item._id.level === ItemLevel.A) {
          initVar.important += item.value;
        }
        initVar.total += item.value;
      });
      pieData.value = [
        { name: "新建", value: initVar.newCont },
        { name: "进行中", value: initVar.dev },
        { name: "完成", value: initVar.done }
      ];
      pieRef.value?.refresh(pieData.value);
    });
  });
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
